<template>
  <div id="container">
    <div class="wrapper">
      <my-header></my-header>
      <my-foor></my-foor>
      <div id="main">
        <div class="carousel-inner">
          <div>
            <img src="/banner/1.jpg" alt="" />
          </div>
          <div class="secbardot">
            <div class="icon"></div>
            <div class="caidan">
              当前位置：
              <a href="#" tppabs="https://www.sfygroup.com/">首页</a>>
              <a
                href="#"
                tppabs="https://www.sfygroup.com/brands-produce/7.html"
                >品牌力</a
              >>
            </div>
          </div>
        </div>
        <div id="box" class="container">
          <div class="sect">
            <span>业绩表现</span>
          </div>
          <div class="secp2">
            <div class="yjp">
              <img
                src="/banner/2.jpg"
                tppabs="https://file.suofeiya.com.cn/v/3a375320-4b70-431a-a7e2-50f4f0916de7"
              />
            </div>
            <div class="yjintro">
              上市十年，公司业绩持续稳定增长。<br />
              2020年全年营收83.53亿元，同比去年增长8.67%；归母净利润11.92亿元，同比去年增长10.66%。
            </div>
          </div>
          <div class="yjcont">
            <div class="yjitem">
              <div class="yjc">83.53亿</div>
              <div class="yjt">2020年营业总收入</div>
            </div>
            <div class="yjitem">
              <div class="yjc">&gt;26%</div>
              <div class="yjt">2011年上市以来总营收年均增长率</div>
            </div>
            <div class="yjitem">
              <div class="yjc">11.92亿</div>
              <div class="yjt">2020年净利润</div>
            </div>
            <div class="yjitem">
              <div class="yjc">X8</div>
              <div class="yjt">2011年上市以来净利润增长倍数</div>
            </div>
          </div>
        </div>
        <div id="box" class="container">
          <div class="sect">
            <span>生产基地</span>
          </div>
          <div class="secpp">
            <div class="yjpp">
              <mu-carousel :active="active">
                <mu-icon value="" slot="left"></mu-icon>
                <mu-icon value="" slot="right"></mu-icon>
                <template slot="indicator" slot-scope="{ index, active }">
                  <mu-button
                    icon
                    class="mu-carousel-indicator-button"
                    :class="{ 'mu-carousel-indicator-button__active': active }"
                    @click="changeActive(index)"
                  >
                    <span class="rect-indicator"></span>
                  </mu-button>
                </template>
                <mu-carousel-item>
                  <img :src="carouselImg1" />
                </mu-carousel-item>
                <mu-carousel-item>
                  <img :src="carouselImg2" />
                </mu-carousel-item>
                <mu-carousel-item>
                  <img :src="carouselImg3" />
                </mu-carousel-item>
                <mu-carousel-item>
                  <img :src="carouselImg4" />
                </mu-carousel-item>
              </mu-carousel>
            </div>

            <div class="yjintroo">
              全国七大生产基地遍布东南西北中，索菲亚在业内率先完成全国工业布局。<br />
              完善的生产基地布局极大提高效率和产能，缩短交货周期，节省物流成本，打破了定制行业普遍面临的行业瓶颈——产能瓶颈，为客户服务提供稳固的供应链保障。
            </div>

            <div id="jdrow">
              <div class="jdli">
                <span>广东增城</span>
                <font>华南生产中心</font>
                <i
                  >定制衣柜及配套定制家具产品、定制橱柜、木地板、配套五金、大宗业务</i
                >
              </div>
              <div class="jdli">
                <span>湖北黄冈</span>
                <font>华中生产中心</font>
                <i>定制衣柜及配套定制家具产品、定制橱柜</i>
              </div>
              <div class="jdli">
                <span>浙江嘉善</span>
                <font>华东生产中心</font>
                <i>定制衣柜及配套定制家具产品</i>
              </div>
              <div class="jdli">
                <span>四川成都</span>
                <font>西部生产中心</font>
                <i>定制衣柜及配套定制家具产品</i>
              </div>
              <div class="jdli">
                <span>河北廊坊</span>
                <font>华北生产中心</font>
                <i>定制衣柜及配套定制家具产品</i>
              </div>
              <div class="jdli">
                <span>河南兰考</span>
                <font>河南索菲亚家居有限责任公司</font>
                <i>定制衣柜及配套定制家具产品、大宗业务</i>
              </div>
              <div class="jdli">
                <span>黑龙江齐齐哈尔</span>
                <font>索菲亚华鹤门业有限公司</font>
                <i>定制木门</i>
              </div>
              <div class="jdmap">
                <span class="dot1 wow fadeInDown" data-wow-delay="0s"
                  >广东增城</span
                >
                <span class="dot2 wow fadeInDown" data-wow-delay="0.2s"
                  >湖北黄冈</span
                >
                <span class="dot3 wow fadeInDown" data-wow-delay="0.4s"
                  >浙江嘉善</span
                >
                <span class="dot4 wow fadeInDown" data-wow-delay="0.6s"
                  >四川成都</span
                >
                <span class="dot5 wow fadeInDown" data-wow-delay="0.8s"
                  >河北廊坊</span
                >
                <span class="dot6 wow fadeInDown" data-wow-delay="1.0s"
                  >河南兰考</span
                >
                <span class="dot7 wow fadeInDown" data-wow-delay="1.2s"
                  >黑龙江齐齐哈尔</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      <!-- 页尾 -->
    <div class="footbox">
      <div class="foot">
        <ul>
          <li class="father">品牌力</li>
          <li>生产经营</li>
          <li>品牌轨迹</li>
          <li>企业荣誉</li>
          <li>销售网络</li>
          <li>全流程服务</li>
          <li>智能制造</li>
        </ul>
        <ul>
          <li class="father">产品力</li>
          <li>新品展示</li>
          <li>时尚设计</li>
          <li>环保生活</li>
        </ul>
        <ul>
          <li class="father">投资者关系</li>
          <li>信息披露</li>
          <li>公司治理</li>
          <li>基本数据</li>
          <li>投资者教育</li>
          <li>投资者接待</li>
          <li>投资者保护</li>
        </ul>
        <ul>
          <li class="father">社会责任</li>
          <li>抗疫行动</li>
          <li>稀捍行动</li>
          <li>希望行动</li>
          <li>关爱行动</li>
        </ul>
        <ul>
          <li class="father"></li>
          <li class="father">新闻中心</li>
          <li>企业动态</li>
          <li>媒体报道</li>
          <li>企业年刊</li>
        </ul>
        <ul>
          <li class="father">招商加盟</li>
          <li>索菲亚柜类定制专家</li>
          <li>华鹤定制家居</li>
          <li>米兰纳定制家居</li>
          <li>家具家品</li>
          <li>工程业务</li>
          <li>>新渠道业务</li>
        </ul>
        <ul>
          <li class="father">商城</li>
          <li>索菲亚柜类定制专家</li>
          <li>司米定制家居</li>
          <li>华鹤定制家居</li>
          <li>米兰纳定制家居</li>
          <li>投资者接待</li>
          <li>投资者保护</li>
        </ul>
        <ul>
          <li class="father">加入我们</li>
          <li>校园招聘</li>
          <li>社会招聘</li>
          <li>培训发展</li>
          <li>米兰纳定制家居</li>
          <li>投资者接待</li>
          <li>投资者保护</li>
        </ul>
      </div>
      <div class="fbq">
        索菲亚家居股份有限公司　保留所有版权© 2021　 target="_blank"
        >粤ICP备10048445号
      </div>
    </div>

  </div>
  
</template>

<script>
import carouselImg1 from "../assets/images/carousel1.jpg";
import carouselImg2 from "../assets/images/carousel2.jpg";
import carouselImg3 from "../assets/images/carousel3.jpg";
import carouselImg4 from "../assets/images/carousel4.jpg";

export default {
  data() {
    return {
      carouselImg1,
      carouselImg2,
      carouselImg3,
      carouselImg4,
      active: 0,
    };
  },
  methods: {
    changeActive(index) {
      this.active = index;
    },
  },
};
</script>

<style scoped>

/* 页脚css开始 */
.footbox {
  width: 100%;
  height: auto;
  overflow: hidden;
  background-color: #2d2d2d;
  height: 290px;

}
.foot {
  width: 100%;
  height: auto;
  padding: 30px 0;
  text-align: center;
  overflow: hidden;
  font-size: 0;
}

.foot ul {
  width: 130px;
  height: auto;
  display: inline-block;
  vertical-align: top;
  border-left: 1px solid #555;
  padding-left: 10px;
  padding-bottom: 10px;
}

.foot ul li {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-align: left;
  color: #ccc;
  font-size: 12px;
}

.foot ul li.father {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 20px;
  font-weight: bold;
}

.foot ul li a {
  text-decoration: none;
  color: #ccc;
  padding: 0 5px;
}

.foot ul li a:hover {
  background: #775c39;
}

.fbq {
  width: 100%;
  height: 35px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.7);
  color: #aaa;
  text-align: center;
  line-height: 35px;
}

.fbq a {
  color: #ccc;
}
/* 页脚css结束 */



/* <!-- 大图部分css开启 --> */
* {
  padding: 0;
  margin: 0;
}

#main img {
  width: 100%;
}
.secbardot  {
  margin-top: -6px;
  overflow: hidden;
  width: 100%;
  background-color: #f5f5f5;
  position: relative;
}
.icon {
  background-image: url(https://sfy-activity.oss-accelerate.aliyuncs.com/uploadfile/202104/57889882-bf1b-4ea6-a7cf-678ba5d8fba5.png?OSSAccessKeyId=LTAI0i3F4sIc2UK5&Expires=1629634809&Signature=1JwMloBTv83naCm9W5xEtiN%2BqAw%3D);
  background-repeat: no-repeat;
  height: 50px;
  width: 100%;
  line-height: 50px;
  margin-left: 130px;
  position: absolute;
  margin-top: 14px;
}
.secbardot .caidan {
  margin-left: 170px;
  height: 50px;
  line-height: 50px;
  color: #444444;
  font-size: 14px;
}

/* <!-- 大图部分css结束 --> */

#box {
  width: 75%;
}

/* box1下的css开始 */

/* box1下的带横线公用大标题css开始 */
.sect {
  height: 100px;
  padding: 30px 40px 40px 40px;

  text-align: center;
}
.sect span {
  font-size: 24px;
  color: #444444;
  text-align: center;
  position: relative;
}
.sect span::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 1px;
  left: 0;
  top: 40px;
  background: #333;
}
/* box1下的带横线公用大标题css结束*/

.secp2 {
  background-color: #f5f5f5;
  position: relative;
  padding-bottom: none;
}
.yjp {
  margin-left: 15%;
}
.yjp::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  left: 0;
  bottom: 0;
  background: #eeeeee;
}
.yjintro {
  position: absolute;
  left: 25%;
  top: 38%;
  color: #ffffff;
}
.yjcont {
  display: flex;
  text-align: center;
  background-color: #eeeeee;
}
.yjcont .yjitem {
  margin: 40px 0;
  width: 24%;
}
.yjcont .yjitem .yjc {
  font-size: 30px;
  font-weight: 500;
  color: #444444;
}
.yjcont .yjitem .yjt {
  font-size: 12px;
  font-weight: 500;
  color: #444444;
}
/* box1下的css结束 */





/* box2下的css开始 */
/* 里面有轮播图组件 */
.yjpp {
  margin-right: 15%;
}
.secpp {
  background-color: #f5f5f5;
}

.yjintroo {
  margin-top: -35px;
  font-size: 12px;
  color: #444444;
  line-height: 26px;
  padding: 40px 10px 40px 40px;
  background-color: #eeeeee;
}
.yjp::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 34px;
  left: 0;
  bottom: -277px;
  background: white;
}
/* box2下的css结束 */





/* 主体内容最下面的地图css开始 */
#jdrow {
  position: relative;
  background-color: white;
  padding-top: 50px;
  margin-bottom: 130px;
}
.jdli {
  width: 700px;
  height: auto;
  padding: 10px 0;
  overflow: hidden;
  margin-top: 2px;
}

.jdli:hover,
.jdli.on {
  background-image: linear-gradient(to left, #fff, #f5f5f5, #f5f5f5);
}

.jdli:hover font,
.jdli.on font {
  font-weight: bold;
}

.jdli span {
  width: 130px;
  padding-right: 25px;
  height: 38px;
  float: left;
  font-size: 14px;
  line-height: 25px;
  text-align: right;
}

.jdli font,
.jdli i {
  width: 450px;
  padding-left: 20px;
  height: auto;
  float: left;
  border-left: 1px dotted #bbb;
  line-height: 25px;
  display: block;
}

.jdli font {
  font-size: 14px;
}

.jdli i {
  color: #999;
  font-style: normal;
  line-height: 30px;
  font-size: 12px;
}
.jdmap {
  width: 660px;
  height: 730px;
  position: absolute;
  top: 50px;
  right: 0;
  background: url(https://file.suofeiya.com.cn/v/d342ff37-c003-4632-b631-df0b771d140c)
    top right no-repeat;
  background-size: 90%;
}

.jdmap span {
  display: block;
  position: absolute;
  width: 100px;
  height: 20px;
  padding-top: 35px;
  line-height: 20px;
  background: url(https://file.suofeiya.com.cn/v/8dc434ab-bfd8-49d2-aba2-3407f377b79d)
    center 5px no-repeat;
  background-size: 20px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.jdmap span.dot1 {
  left: 430px;
  top: 380px;
}

.jdmap span.dot2 {
  left: 425px;
  top: 310px;
}

.jdmap span.dot3 {
  left: 495px;
  top: 310px;
}

.jdmap span.dot4 {
  left: 280px;
  top: 330px;
}

.jdmap span.dot5 {
  left: 435px;
  top: 185px;
}

.jdmap span.dot6 {
  left: 445px;
  top: 245px;
}

.jdmap span.dot7 {
  left: 520px;
  top: 60px;
}

.jdmap span:hover,
.jdmap span.on {
  font-weight: bold;
  font-size: 12px;
  background-size: 30px;
  background-position: center top;
}
/* 主体内容最下面的地图css结束 */

.page {
  width: 960px;
  margin: 0 auto;
  /* padding-bottom:290px;等于footer的高度 */
}
</style>

